<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	    *{
	        margin: 0;
	        padding: 0;
	    }
	    .box{
	        width: 700px;
	        height: 550px;
	        margin: 50px auto;
	        border: 5px solid rgb(238, 124, 17);
	    }
	    .named{
	        width: 400px;
	        display: flex;
	        justify-content: space-evenly;
	        margin: 30px auto;
	    }
	
	    input{
	        width: 100px;
	        height: 50px;
	        background-color: pink;
	        color: red;
	        border: 1px solid black;
	        border-radius:10px;
	        text-align: center;
	        font-size: 20px;
	        cursor: pointer;
	    }
	    p{
	        text-align: center;
	        color: seagreen;
	        font-size: 17px;
	        font-weight: bold;
	    }
	    .box2{
	        width: 150px;
	        height: 150px;
	        border: 2px solid yellow;
	        border-radius: 10px;
	        margin: 20px auto;
	        text-align: center;
	        font-size: 50px;
	        line-height: 150px;
	    }
	    ul{
	        display: flex;
	        flex-wrap: wrap;
	        justify-content: space-around;
	    }
	    li{
	        width: 100px;
	        height: 50px;
	        border: 2px dashed rgb(185, 17, 45);
	        border-radius: 23px;
	        list-style: none;
	        margin-top: 10px;
	        text-align: center;
	        font-size: 17px;
	        line-height: 50px;
	
	    }
	    ul li:nth-child(1){
	        background-color: rgb(卢辉6, 243, 84);
	    }
	</style>
</head>
<body>
	<div class="box">
	    <div class="named">       
	        <input type="buttom" value="开始点名" class="start">
	        <input type="buttom" value="停止" class="stop">
	    </div>
	    <p>你将会是下一个幸运儿吗？请看大屏幕</p>
	    <div class="box2">01</div>
	    <ul>
	        <li>前程</li>
	        <li>王杰</li>
	        <li>张波</li>
	        <li>刘成毅</li>
	        <li>朱转鹏</li>
	        <li>张紫璇</li>
	        <li>卢耀斌</li>
	        <li>王存</li>
	        <li>曾平浩</li>
	        <li>卢辉</li>
	        <li>卢辉</li>
	        <li>卢辉</li>
	        <li>前程</li>
	        <li>前程</li>
	        <li>前程</li>
	        <li>张波</li>
	        <li>王杰</li>
	        <li>王存</li>
	    </ul>
	</div>
</body>
	<script>
		var start = document.getElementsByClassName('start')[0];
		var stops = document.getElementsByClassName('stop')[0];
		var li = document.getElementsByTagName('li');
		var box2 = document.getElementsByClassName('box2')[0];
		var arr = [];
		for(var i = 0; i < li.length; i++){
			arr.push(li[i].innerHTML)
		}
		console.log(arr);
		var time = null;
		start.onclick = function(){
			clearInterval(time);
			time = setInterval(function(){
				// Math.floor()   向下取整
				// Math.random()   取随机数
				var i = Math.floor(Math.random()*arr.length);
				for(var j = 0 ;j < li.length ; j++){
					li[j].style.background = "transparent";
				}
				li[i].style.background = "green";
				box2.innerHTML = li[i].innerHTML;
				
				
			},50)
		}
		stops.onclick = function(){
			clearInterval(time);
		}
		
		
		
		
		
		
	</script>
</html>